.container {
  height: 100vh;
  background-color: #6d6d6d;
  &::before {
    display: table;
    content: '';
  }
  // 展示自定义的回退按钮
  .returnIcon {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-left: 40px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #fff;
    border-radius: 50%;
  }
  // 展示当前主体的视频内容
  .content {
    position: absolute;
    top: 0;
    // top: 48%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    // margin: -48% auto auto auto;
    > video {
      width: 100%;
      height: 100%;
    }
  }

  // 展示当前文章的标题信息
  .titleInfo {
    position: absolute;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 80px);
    padding: 70vh 40px 0 40px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(84, 84, 84, 0.3));
    .title {
      > text {
        display: block;
        color: #fff;
        font-weight: bold;
        text-align: left;
        text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.16);
        &:nth-of-type(1) {
          font-size: 32px;
        }
        &:nth-of-type(2) {
          margin-top: 24px;
          margin-bottom: 16px;
          font-size: 40px;
        }
        &:nth-of-type(3) {
          font-size: 28px;
        }
      }
    }
    // 展示当前头部的内容
    .header {
      position: relative;
      z-index: 3;
      color: #fff;
      // 展示当前的回退图标
      > view {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 74px;
        height: 74px;
        background-color: rgba(0, 0, 0, 0.3);
        border: 1px solid #fff;
        border-radius: 50%;
        &:last-child {
          margin-top: 46px;
        }
      }
    }
  }
}
